<template>
  <div class="content">
    <div class="cloud-header">
      <h2>规则管理</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <p class="cloud-subset-tips">在开发的场景同，通常一个项目管理多个应用，如微信公众号，微信小程序，数据后台等等公用的一个数据库，此处用于区分不同应用场景<br></p>
      </div>
      <div class="authorization-frame">
        <div class="role-container">
          <div v-for="(r, index) of roles" :key="index" class="role-item" :class="{selected: role == r.name}" @click="changeRole(r.name,index)">
            <p class="title">{{r.name}}</p>
            <p class="desc">{{r.description}}</p>
          </div>
        </div>
        <div class="menu-container">
          <div style="margin-bottom: 10px;">
            <Button color="primary" size="s" @click="$refs.menu.chooseAll();$refs.menu.expandAll()">全选</Button>
            <Button size="s" @click="menus = []">清空</Button>
          </div>
          <Tree :option="param" multiple choose-mode="some" v-model="menus" ref="menu"></Tree>
        </div>
        <div class="users-container">
          <div style="margin-bottom: 10px;">
            <Button color="primary" size="s" @click="$refs.user.chooseAll();$refs.user.expandAll()">全选</Button>
            <Button size="s" @click="users = []">清空</Button>
          </div>
        </div>
      </div>
      <div class="text-center">
        <Button color="primary" @click="save">保存</Button>
        <Button @click="getData">重置</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      role: 'admin',
      index: 0,
      roles: [],
      param: {
        keyName: 'menuId',
        parentName: 'parentId',
        titleName: 'title',
        dataMode: 'list',
        getTotalDatas: (resolve) => {
          this.getMenusAll(resolve);
        }
      },
      menus: [],
      users: []
    };
  },
  mounted() {
    this.initialize();
  },
  methods: {
    /**
     * 数据初始化
     * @return {[type]} [description]
     */
    initialize() {
      this.$cloud.roles().all().then(data => {
        console.log('data', data);
        if (data) {
          this.roles = data;
          this.role = data[0].name;
          this.menus = data[0].menus;
        }
      }).catch(error => {
        log(error);
      });
    },
    /**
     * 获取所有菜单信息
     * @return {[type]} [description]
     */
    getMenusAll(resolve) {
      let list = [
        { menuId: 0, title: '操作后台', icon: '', show: true, type: 'PATH', name: 'admin' }
      ];
      this.$cloud.menus().all().then(data => {
        data = list.concat(data);
        resolve(data);
      });
    },
    changeRole(r, index) {
      this.role = r;
      this.index = index;
      this.menus = this.roles[index].menus;
    },
    getData() {

    },
    /**
     * 保存
     * @return {[type]} [description]
     */
    save() {
      let role = this.roles[this.index];
      console.log('role', role);
      this.$cloud.roles().edit(role._id, { menus: this.menus }).then(data => {
        this.roles[this.index].menus = this.menus;
        this.$Message({
          type: 'success',
          text: `保存成功`
        });
      }).catch(error => {
        log(error);
      });
    }
  },
  computed: {

  }
};

</script>
<style lang="less" scoped="true">
.authorization-frame {
  margin: 0 15px 20px 15px;
  display: flex;
  height: 68vh;
  border: @border;

  >div {
    padding: 20px 15px;
    border-right: @border;
    flex: 1;
    overflow: auto;

    &:last-of-type {
      border-right: none;
    }

    .h-tree-show-desc {
      font-size: 14px;
    }
  }

  .role-container {
    padding: 0;

    .role-item {
      padding: 5px 10px;
      border-bottom: @border;

      &.selected,
      &:hover {
        background: @gray4-color;
        cursor: pointer;
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        color: @dark-color;
      }

      .desc {
        color: @dark2-color;
      }
    }
  }
}

</style>
